<template>
    <div class="menus_left_list_content_slide">
        <li class="all_class" @click="allChoose">
            <SvgIcon :icon-class="status" width="17px" height="17px" />
            <span>全选</span>
        </li>

        <li v-for="item in data" class="row_li">
            <SvgIcon
                :icon-class="item.chooseStatus"
                width="17px"
                height="17px"
                @click.stop="menuItemChoose(item)"
            />
            <span
                @click.stop="menuItemActive(item, data)"
                :style="{
                    background: item.actived ? '#f5f6f7' : '',
                }"
                >{{ item.label }}</span
            >
            <teleport defer to=".menus_left_list_content">
                <menusSelectItem
                    v-if="item.children && item.actived"
                    class="childrenCLass"
                    v-model:menuList="item.children"
                ></menusSelectItem>
            </teleport>
        </li>
    </div>
</template>

<script setup lang="ts">
let status = ref("noneSelect");

const data = defineModel("menuList", {
    type: Array,
    required: true,
    default: () => [] as any,
});

const props = defineProps({
    searchMenus: {
        required: false,
        default: () => "",
    },
});

// 全选
const allChoose = () => {
    data.value.forEach((item: any) => {
        menuItemChoose(item);
    });
};
// 单选
const menuItemChoose = (chooseData: any, flag: any = false) => {
    if (flag) {
        chooseData.choosed = true;
    } else {
        chooseData.choosed = !chooseData.choosed;
    }

    deepChooseChildren(chooseData, chooseData.choosed);
};

// 点击行
const menuItemActive = (touchData: any, sameLeaveData: any) => {
    sameLeaveData.forEach((item: any) => {
        if (touchData.label === item.label) {
            touchData.actived = !touchData.actived;
        } else {
            item.actived = false;
        }
        if (item.children) {
            deepTouch(item.children, false);
        }
    });
};

// 递归点击行
const deepTouch = (data: any, flag: any) => {
    data.forEach((item: any) => {
        item.actived = flag;
        if (item.children) {
            deepTouch(item.children, flag);
        }
    });
};

// 递归儿子
const deepChooseChildren = (data: any, flag: any) => {
    if (!data.children) {
        data.chooseStatus = flag ? "allSelect" : "noneSelect";
        deepChangeParent(data);
        return;
    }
    data.children.forEach((item: any) => {
        item.choosed = flag;
        deepChooseChildren(item, flag);
    });
};

//  递归父亲
const deepChangeParent = (data: any) => {
    let flag = 0;
    if (data.parent) {
        let noneList = data.parent.children.filter((item: any) => {
            return item.chooseStatus === "noneSelect";
        });
        let allList = data.parent.children.filter((item: any) => {
            return item.chooseStatus === "allSelect";
        });
        if (noneList && noneList.length === data.parent.children.length) {
            flag = 1;
            data.parent.chooseStatus = "noneSelect";
        }
        if (allList && allList.length === data.parent.children.length) {
            flag = 2;
            data.parent.chooseStatus = "allSelect";
        }
        if (flag === 0) {
            data.parent.chooseStatus = "partSelect";
        }

        deepChangeParent(data.parent);
    }
};

// 暴露的属性和方法
defineExpose({ menuItemChoose });
</script>

<style lang="scss" scoped>
.menus_left_list_content_slide {
    font-size: 14px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    width: 156px;
    height: 225px;
    overflow-y: scroll;
    border-radius: 6px;
    position: relative;
    .all_class {
        margin-bottom: 25px;
    }
    li {
        cursor: pointer;
        display: flex;
        align-items: center;
        width: 100%;
        margin-bottom: 18px;
        span {
            border-radius: px;
            padding: 0 12px;
            margin-left: 8px;
        }
    }
    :last-child {
        margin-bottom: 0;
    }
}
</style>
